<template>
    <div class="warp">
        <div class="tabs-nav">
            <p :class="{active:index == tabsNavActive}"
               v-for="(item,index) in tabsNav"
               @click="handleTabsNav(index)"
               :key="item"
            >{{item}}</p>
        </div>
        <div class="content">
            <el-form ref="form" :model="formQuery" size="mini">
                <el-form-item label="人员类别" label-width="100px">
                    <el-select size="mini" @change="paramValueChange()" v-model="formQuery.type"  placeholder="请选择">
                        <el-option
                            v-for="item in type"
                            :key="item.val"
                            :label="item.label"
                            :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="参评职称" label-width="100px">
                    <el-select size="mini" @change="paramValueChange()" v-model="formQuery.categoryId"  placeholder="请选择">
                        <el-option
                            v-for="item in optionsData"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template v-for="(item,i) in tabsNav" >
                <template-table
                    v-if="tabsNavActive == i && formQuery.categoryId"
                    :tableParams="tableParams"
                    @handleApplyParticipate="handleApplyParticipate"
                    @hanldeReviewsPreview="hanldeReviewsPreview"
                    :key="i">
                </template-table>
            </template>
        </div>
        <admin-edit-reviews-apply
            v-if="showPreview"
            :showPreview.sync="showPreview"
            :showPreviewUserId="showPreviewUserId">
        </admin-edit-reviews-apply>
        <reviews-preview ref="reviewsPreviewCont" v-if="openPreview" :openPreview.sync="openPreview" :resData="resData"></reviews-preview>
    </div>
</template>

<script>

    import templateTable from '@/components/reviewsManage/templateTable'
    import adminEditReviewsApply from '@/components/reviewsManage/adminEditReviewsApply'
    import reviewsPreview from "@/components/reviewsManage/reviewsPreview";
    import {findDataByUserId} from "@/service/api";
    import Qs from "qs";

    export default {
        name: "reviewsPersonnel",
        data() {
            return {
                tabsNav:['高教','科研','工程','其他'],
                tabsNavActive:0,
                formQuery:{
                    categoryId: '', // 职称
                    type: '1', // 1军人干部 2文职人员
                },
                optionsData:['续任正高','晋升正高','续任副高','晋升副高','续任中职','晋升中职','续任初职','晋升初职'],
                type:[
                    {label:'军人干部',val:'1'},
                    {label:'文职人员',val:'2'}
                ],
                tableParams:{},
                showPreview:false,
                showPreviewUserId:'',
                openPreview:false,
                resData:''
            }
        },
        components:{
            templateTable,
            reviewsPreview,
            adminEditReviewsApply

        },
        created() {
        },
        methods:{
            handleTabsNav(index) {
                this.tabsNavActive = index;
                this.getTablsData()
                console.log(this.tableParams)
            },

            paramValueChange() {
                // console.log('------'+this.tabsNavActive)
                // console.log(this.formQuery.categoryId.split('-')[1])
                this.getTablsData()
            },
            getTablsData() {
                this.tableParams = {
                    categoryName: this.formQuery.categoryId,
                    type: this.formQuery.type,
                    category: this.tabsNav[this.tabsNavActive]
                }
            },
            handleApplyParticipate(userId){
                console.log(userId)
                this.showPreviewUserId = userId;
                this.showPreview = true
            },
            hanldeReviewsPreview(userId){ //预览
                let params = {
                    intfaceType: 'a',
                    userId: userId
                };
                findDataByUserId(Qs.stringify(params)).then(res => {  //筛选查询数据
                    if (res.code == 200) {
                        if(!res.data.msg){
                            this.resData = res.data;
                            this.resData.bottomOperation = false;
                            this.openPreview = true;
                        }else {
                            this.$message.error(res.data.msg);
                        }
                    }
                })

            },
        },
    }
</script>

<style scoped>
    .warp{
        height: 100%;
        min-width: 800px;
    }
    .tabs-nav{
        display: flex;
    }
    .tabs-nav > p{
        width:113px;
        height:38px;
        font-size:14px;
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        color: #fff;
        margin-right: 2px;
        background:rgba(49,71,143,1);
        opacity:0.65;
        cursor: pointer;
        border-radius:8px 8px 0px 0px;
    }
    .tabs-nav > p.active{
        opacity: 1;
        background:linear-gradient(0deg,rgba(16,41,122,1) 0%,rgba(50,85,200,1) 100%);
        border-radius:8px 8px 0px 0px;
    }
    .content{
        width: 100%;
        min-height: calc(520px - 38px);
        height: calc(100% - 38px);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
    }
    .content >>> .el-form{
        margin-top: 18px;
        display: flex;
    }
    .div-ditable{
        height: 60px;
    }
    .div-ditable span{
        padding: 0 10px;
    }

</style>
